<template>
  <div>
    <a-page-header class="pt-0" @back="back" :title="t('填写表单')"></a-page-header>
    <a-spin :spinning="table.loading" class="w-[100%]">
      <a-form layout="vertical" @finish="submit" :rules="formRules" :model="form" ref="formRef">
        <a-card :bordered="false" :body-style="{ paddingTop: '0' }">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item :label="t('父级菜单')" name="parentId">
                <a-tree-select
                  :field-names="{
                    label: 'menuName',
                    value: 'menuId',
                  }"
                  v-model:value="form.parentId"
                  placeholder="选择父级菜单"
                  :treeData="treeData"
                ></a-tree-select>
              </a-form-item>
              <a-form-item :label="t('菜单名称')" name="menuName">
                <a-input allow-clear v-model:value="form.menuName" />
              </a-form-item>
              <a-form-item :label="t('菜单类型')" name="menuType">
                <a-radio-group :options="menuTypeOptions" v-model:value="form.menuType" />
              </a-form-item>
              <a-form-item :label="t('组件路径')" name="component" v-if="form.menuType === 'C'">
                <a-input allow-clear v-model:value="form.component" />
              </a-form-item>
              <a-form-item :label="t('路由')" name="path" v-if="form.menuType === 'C'">
                <a-input allow-clear v-model:value="form.path" />
              </a-form-item>
              <a-form-item :label="t('选择图标')" name="icon">
                <IconSelector v-model="form.icon" name="icon"></IconSelector>
              </a-form-item>
              <a-form-item :label="t('是否显示')" name="hidden">
                <LocalOptions v-model="form.visible" :option="SYSTEM_OPTION_TYPE.IS"></LocalOptions>
              </a-form-item>
              <a-form-item :label="t('排序')" name="orderNum">
                <a-input-number
                  :min="0"
                  v-model:value="form.orderNum"
                  class="w-[100%]"
                ></a-input-number>
              </a-form-item>
              <a-form-item :label="t('是否为链接')" name="isFrame">
                <LocalOptions v-model="form.isFrame" :option="SYSTEM_OPTION_TYPE.IS"></LocalOptions>
              </a-form-item>
            </a-col>
          </a-row>

          <div class="flex gap-4">
            <a-button type="primary" htmlType="submit">{{ t('保存') }}</a-button>
            <a-button @click="reset">{{ t('重置') }}</a-button>
          </div>
        </a-card>
      </a-form>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { list } from '../data/curd';
import { allowEditMenu, table } from '../data/data';
import { formRef, form, formRules } from '../data/form';
const { t } = useI18n();
import { menuTypeOptions } from '../data/options';
import { addMenu, updateMenu } from '@/api/modules/auth/menu';
import { notify } from '@/utils/common/common';
import type { IResponse } from '@/api/config/types';
import { SYSTEM_OPTION_TYPE } from '@/enum/system';

const treeData = ref();
const back = () => {
  allowEditMenu.value = false;
  reset();
};
const submit = async () => {
  table.value.loading = true;
  let result: IResponse | undefined = undefined;
  if (!form.value.menuId) {
    const { data } = await addMenu(form.value);
    result = data;
  } else {
    const { data } = await updateMenu(form.value);
    result = data;
  }
  notify(result!);
  reset();
  list();
  allowEditMenu.value = false;
};
const reset = () => {
  formRef.value?.resetFields();
};

onMounted(() => {
  treeData.value = [
    {
      menuId: '0',
      menuName: '主页',
      children: table.value.data,
    },
  ];
});
</script>

<style lang="scss" scoped></style>
